<template>
    <div>
        <!-- 标签 -->
        <div class="app-container">
            <br>
            <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick">
                <el-tab-pane label="检查项目列表" name="check">
                    <!-- 查询条件开始 -->
                    <el-form ref="queryCheckFrom" :model="queryCheckParams" :inline="true" label-width="68px">
                        <el-form-item label="项目名称" prop="checkItemId">
                            <el-select v-model="queryCheckParams.checkItemId" placeholder="请选择项目名称" clearable
                                       size="small" style="width:180px">
                                <el-option v-for="d in checkItemOptions" :key="d.checkItemId" :label="d.checkItemName"
                                           :value="d.checkItemId" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="患者名称" prop="patientName">
                            <el-input v-model="queryCheckParams.patientName" placeholder="请输入患者名称" clearable
                                      size="small" style="width:180px" />
                        </el-form-item>
                        <el-form-item label="交易时间">
                            <el-date-picker v-model="queryCheckParams.dateRange" size="small" style="width:320px"
                                            value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期(默认今天)"
                                            end-placeholder="结束日期(默认今天)" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleCheckQuery">搜索
                            </el-button>
                            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetCheckQuery">重置
                            </el-button>
                        </el-form-item>
                    </el-form>
                    <!-- 查询条件结束 -->
                    <!-- 数据表格开始 -->
                    <el-table v-loading="loading" border :data="checkList" show-summary>
                        <el-table-column label="检查项目ID" prop="checkItemId" align="center" />
                        <el-table-column label="检查项目名称" prop="checkItemName" align="center" />
                        <el-table-column label="项目价格" prop="price" align="center" />
                        <el-table-column label="患者姓名" prop="patientName" align="center" />
                        <el-table-column label="检查状态" prop="resultStatus" align="center"
                                         :formatter="resultStatusFormatter" />
                        <el-table-column label="创建时间" prop="createTime" align="center" />
                        <el-table-column label="创建人" prop="createBy" align="center" />
                    </el-table>
                    <!-- 数据结束结束 -->

                </el-tab-pane>
                <el-tab-pane label="检查项目统计列表" name="checkStat">
                    <!-- 查询条件开始 -->
                    <el-form ref="queryCheckStatFrom" :model="queryCheckStatParams" :inline="true" label-width="68px">
                        <el-form-item label="项目名称" prop="checkItemId">
                            <el-select v-model="queryCheckStatParams.checkItemId" placeholder="请选择项目名称" clearable
                                       size="small" style="width:180px">
                                <el-option v-for="d in checkItemOptions" :key="d.checkItemId" :label="d.checkItemName"
                                           :value="d.checkItemId" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="交易时间">
                            <el-date-picker v-model="queryCheckStatParams.dateRange" size="small" style="width:320px"
                                            value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期(默认今天)"
                                            end-placeholder="结束日期(默认今天)" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleCheckStatQuery">
                                搜索
                            </el-button>
                            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetCheckStatQuery">
                                重置
                            </el-button>
                        </el-form-item>
                    </el-form>
                    <!-- 查询条件结束 -->
                    <!-- 数据表格开始 -->
                    <el-table v-loading="loading" border :data="checkStatList" show-summary>
                        <el-table-column label="检查项目ID" prop="checkItemId" align="center" />
                        <el-table-column label="检查项目名称" prop="checkItemName" align="center" />
                        <el-table-column label="总金额" prop="sumPrice" align="center" />
                        <el-table-column label="检查次数" prop="countItem" align="center" />
                    </el-table>
                    <!-- 数据结束结束 -->
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    export default {
        name: "check",
        data() {
            return {
                // 遮罩
                loading: false,
                // 被激活的tab名称
                activeName: 'check',
                // 检查项目列表销售数据
                checkList: [],
                // 检查项目统计列表的销售数量数据
                checkStatList: [],
                // 检查项目列表查询参数
                queryCheckParams: {},
                // 检查项目统计列表查询参数
                queryCheckStatParams: {},
                // 所有的检查项目
                checkItemOptions: [],
                // 检查状态字典数据
                resultStatusOptions: []
            }
        },
        created() {
            // 默认查询检查项目列表
            this.listCheck()
            // 初始化检查项目
            this.initcheckItem();
            // 加载状态的字典数据
            this.initResultStatus();
        },
        methods: {
            // 点击tab事件
            handleClick() {
                //console.log(this.activeName)
                if (this.activeName === 'check') {
                    this.listCheck()
                } else {
                    this.listCheckStat()
                }
            },
            // 查询检查项目列表
            listCheck() {
                this.loading = true
                this.$axios.post("statistics/api/check-result/queryAll", this.queryCheckParams).then(res => {
                    this.checkList = res.data.data;
                    this.loading = false
                }).catch(() => {
                    this.msgError('查询失败')
                    this.loading = false
                })
            },
            // 查询检查项目列表
            handleCheckQuery() {
                this.listCheck()
            },
            // 重置检查项目列表
            resetCheckQuery() {
                this.queryCheckParams = {}
                this.listCheck()
            },
            // 查询检查项目统计列表
            listCheckStat() {
                this.loading = true
                this.$axios.post("statistics/api/check-result/querySata", this.queryCheckStatParams).then(res => {
                    this.checkStatList = res.data.data;
                    this.loading = false
                }).catch(() => {
                    this.msgError('查询失败')
                    this.loading = false
                })
            },
            // 销售列表查询
            handleCheckStatQuery() {
                this.listCheckStat()
            },
            // 重置销售列表查询
            resetCheckStatQuery() {
                this.queryCheckStatParams={}
                this.listCheckStat()
            },
            //查询所有的检查项目
            initcheckItem(){
                this.$axios.get("/statistics/api/check-result/initcheckItem").then(res => {
                    this.checkItemOptions = res.data.data;
                })
            },
            /* 查询检查状态(字典) */
            initResultStatus() {
                this.$axios.get("/statistics/api/check-result/fingBytype/his_check_result_status").then(res => {
                    this.resultStatusOptions = res.data.data;
                })
            },
            //检查状态的解析
            resultStatusFormatter(row) {
                let resultStatus = row.resultStatus;
                return this.formatDict(this.resultStatusOptions, resultStatus);
            },
        }
    }
</script>

<style scoped>

</style>
